<!-- 耗材申领-申领药品 -->
<template>
  <div>
    <el-row class="mt10 spn" type="flex">
      <Search :data="selections" :attribute="'createdTime'" @dateChange="handleDateChange" @change="handleTypeChange" />
      <el-form ref="searchFormRef" :model="searchForm" label-width="80px" :inline="true">
        <span class="spn">
          <el-form-item>
            <el-input v-model="searchForm.customerName" class="inputCss" placeholder="姓名、手机号、会员号" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchBtn">搜索顾客</el-button>
          </el-form-item>
        </span>
      </el-form>
    </el-row>
    <!-- 表格区域 -->
    <el-table v-loading="loading" :data="treatmentList">
      <el-table-column label="名称" prop="projectName" />
      <!-- <el-table-column label="项目属性" prop="productAttrib" align="center" /> -->
      <el-table-column label="项目单号" prop="productNo" align="center" />
      <el-table-column label="订单号" prop="orderCode" align="center" />
      <el-table-column label="顾客" prop="customerName" align="center" />
      <el-table-column label="收费时间" prop="collectionTime" align="center">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.collectionTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="120" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="caseReportBtn(scope.row)">写病历</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" />
    <!-- 领公共药品/项目药品 -->
    <Dialog :title="title" :visible.sync="visible" :button-text="testBtn" :loading="loading" class="dialogStyle" @confirm="submitForm">
      <el-form :inline="true" :model="formInline" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="选择顾客：">
              <el-select v-model="formInline.customerName" placeholder="请选择" disabled>
                <el-option v-for="item in customerOptions" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选择项目：">
              <el-select v-model="formInline.projectName" placeholder="请选择" disabled>
                <el-option v-for="item in projectOptions" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!-- <el-col :span="12">
            <el-form-item label="病历模板：">
              <el-select v-model="formInline.medicalRecordType" placeholder="请选择">
                <el-option label="病历一" value="病历一" />
                <el-option label="病历二" value="病历二" />
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="存放位置：">
              <el-input v-model="formInline.location" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="editor">
            <el-form-item label="病历内容：">
              <editor id="editor_id" v-model="addEditornDate.content" height="300px" width="96%" :content.sync="editorText" :load-style-mode="false" @on-content-change="onContentChange" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </Dialog>
  </div>
</template>
<script>
import Search from "@/components/Search";
import { selections } from "@/config";
import Dialog from "@/components/Dialog/index";
import editor from './kindeditor.vue';
import "@/assets/styles/common.scss";
export default {
  components: {
    Search,
    Dialog,
    // Twotabs,
    editor,
  },
  data() {
    return {
      selections,
      searchForm: {},
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      customerOptions: [],
      projectOptions: [],
      treatmentList: [],
      addEditornDate: [],
      editorText: '', // 双向同步的变量
      formInline: {},
      title: "",
      testBtn: "",
      visible: false,
      loading: false,
      flag: false,
    };
  },
  created() {
    this.getTreatmentList();
  },
  methods: {
    // async getTreatmentList() {
    //   this.loading = true;
    //   const res = await this.$api['department/order/orderlist']({ ...this.params, query: this.searchForm });
    //   this.loading = false;
    //   if (res.code !== 200) return this.$message.error('查询治疗项目列表失败！');
    //   this.treatmentList = res.data.result;
    //   this.total = res.data.total;
    // },
    handlePaginationChange(val) {
      this.params = { page: val.pageNum, pageSize: val.pageSize };
      this.getChargeList();
    },
    // 搜索
    searchBtn() {
      this.getTreatmentList();
    },
    // 所有顾客信息
    async getCustomerData() {
      const res = await this.$api['department/consumables/customerall']();
      if (res.code === 200) {
        this.customerOptions = res.data;
      }
    },
    // 所有项目信息
    async getProjectData() {
      const res = await this.$api['department/consumables/projectall']();
      if (res.code === 200) {
        this.projectOptions = res.data;
      }
    },
    // 写病历
    caseReportBtn(row) {
      console.log(row);
      this.formInline = row;
      this.title = "新增病历";
      this.testBtn = "提交";
      this.visible = true;
      this.getCustomerData();
      this.getProjectData();
    },
    // 提交
    async submitForm() {
      this.loading = true;
      const res = await this.$api['department/consumables/addmedicalrecord']({ ...this.formInline });
      this.loading = false;
      if (res.code !== 200) return this.$message.error('新增病历失败！');
      this.$message.success('新增病历成功！');
      this.getTreatmentList();
      this.visible = false;
    },
    onContentChange(val) {
      this.formInline.medicalRecordContent = val;
    },
    // 顶部时间筛选
    handleDateChange(val) {
      this.searchForm.timeType = val.timeType;
      this.searchForm.createdTime = val.createdTime;
      this.getTreatmentList();
    },
    handleTypeChange(val) {
      this.searchForm.timeType = val.timeType;
      this.searchForm.createdTime = val.createdTime;
      this.getTreatmentList();
    },
  },
};
</script>
<style lang="scss" scoped>
.submitBtn {
  text-align: center;
}
::v-deep .editor .el-form-item__content {
  width: 83% !important;
}
</style>
